<template>
  <div class="table">
    <!-- 使用element-ui的表格组件，绑定tableData数据，设置表格样式 -->
    <el-table :data="tableData" stripe style="width: 100%" height="550">
      <!-- 定义表格的列，prop为数据字段名，label为列名，width为列宽 -->
      <el-table-column prop="date" label="#" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="phone" label="电话" />
      <el-table-column prop="role" label="角色" />
      <!-- 定义状态列，使用el-switch组件，绑定row.state -->
      <el-table-column prop="state" label="状态">
        <template #default="{ row }">
          <el-switch v-model="row.state" size="large" @click="switchState(row)" />
        </template>
      </el-table-column>
      <el-table-column prop="handle" label="操作">
        <template #default="{ row }">
          <userData @callParentMethod="tableId(row)" @tableObject="tableObjectFun(row)" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { getUserState } from '@/api/userState'
import { getUserTable } from '@/api/userTable'
import { useCounterStoreB } from '@/stores/temporary'
import userData from './userDate/index.vue'
const seekId = ref()
const storeB = useCounterStoreB()
// 定义接口UserTable，包含用户表的数据字段
interface UserTable {
  id: number
  username: string
  email: string
  phone: string // 假设接口有电话字段，如果没有需要调整
  create_time: string
  role_name: string
  mg_state: boolean | string // 可能是字符串，需要转换为布尔
}
// 定义接口TableDataItem，包含表格数据的数据字段
interface TableDataItem {
  date: number
  name: string
  email: string
  phone: string
  role: string
  state: boolean
  id?: number
  username?: string
}
// 定义接口UserTableResponse，包含用户表接口的响应数据
interface UserTableResponse {
  data: {
    data: {
      users: UserTable[]
    }
  }
}
// 使用ref定义tableData，初始值为空数组
const tableData = ref<TableDataItem[]>([])

// 定义table函数，用于获取用户表数据
const table = async () => {
  // 调用getUserTable接口，获取用户表数据
  const res = (await getUserTable({ pagenum: 1, pagesize: 100 })) as UserTableResponse
  // 获取用户数据
  const userData = res.data.data.users
  // 转换接口数据为表格数据格式
  tableData.value = userData.map((userData) => ({
    date: userData.id,
    name: userData.username,
    email: userData.email,
    phone: userData.create_time, // 如果接口没有电话字段，先空着
    role: userData.role_name,
    state: userData.mg_state === '1' || userData.mg_state === true, // 转换为布尔值
  }))
}

// 定义一个异步函数，用于切换状态
const switchState = async (row: TableDataItem) => {
  try {
    // 调用getUserState函数，传入uId和type参数
    await getUserState({ uId: row.date, type: row.state })
  } catch (error) {
    // 如果发生错误，打印错误信息
    console.log(error)
  }
}
// 定义一个函数，用于调用父组件的方法
const tableId = (row: TableDataItem) => {
  const rowId = row.date
  storeB.rowIdFun(rowId)
}
const tableObjectFun = (row: TableDataItem) => {
  storeB.rowObjectFun(row.date, row.name, row.email, Number(row.phone), row.role)
  storeB.rowIdFun(row.date)
}

// 在组件挂载时调用table函数
onMounted(() => {
  table()
})
watch(
  () => storeB.seekObject,
  (i) => {
    seekId.value = i
    tableData.value = tableData.value.filter((item) => item.date === seekId.value)
  },
)
</script>

<style scoped></style>
